<template>
    <div>
        <el-table :data="adminList" border stripe>
            <el-table-column
                prop="user_name"
                label="姓名"
                width="width">
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="注册日期"
                width="width">
            </el-table-column>
            <el-table-column
                prop="city"
                label="地址"
                width="width">
            </el-table-column>
            <el-table-column
                prop="admin"
                label="权限"
                width="width">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handlerSizeChange"
            @current-change="currentChange"
            :current-page="page"
            :page-sizes="[20, 40, 70]"
            :page-size="limit"
            layout="prev, pager, next, jumper,->,sizes,total"
            :total="totalNum" background>
            :pager-count="11">
        </el-pagination>
        
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name:'adminList',
    data(){
        return {
            limit:20,
            offset:0,
            page:1,
            totalNum:0
        }
    },
    mounted(){
        this.getAdminList()
    },
    computed:{
        ...mapState({
            adminList:state => state.dataManage.adminList
        })
    },
    methods:{
        async getAdminList(){
            await this.$store.dispatch('dataManage/getAdminList',{limit:this.limit,offset:this.offset})
            const totalNum = await this.$store.dispatch('dataManage/getAdminCount')
            this.totalNum = totalNum
        },
        handlerSizeChange(size){
            this.limit = size
            this.getAdminList()
        },
        currentChange(page = 1){
            this.page = page
            this.offset = this.limit * page
            this.getAdminList()
        }
    }
}
</script>

<style>

</style>